<template>
	<div class="MyInformation">
		<div id="HeadPortrait">
			<!-- 展示用户头像，数据从后台获取，如果没有拿到则显示默认图片 -->
			<img class="Headportrait" :src="img_item?img_item:require('assets/img/Head_portrait/Headportrait.png')" alt="">
		</div>
		<p class="Information_item">用户名: <span>{{user_information.username}}</span></p>
		<p class="Information_item">邮箱地址: <span>{{user_information.email}}</span></p>
	</div>
</template>

<script>
	export default {
		name: 'MyInformation',
		data: function(){
			return {
				// 这些数据以后从服务器请求过来
				img_item: false,
				userid: this.$store.state.userid,
				user_information: {}
			}
		},
		created() {
			this.axios.get('http://192.168.43.169/api/userquery/'+this.userid).then((response) => {
				if (response.data.code = 200) {
					this.user_information = response.data.data[0]
				} else{
					this.user_information = {}
				}
			  }
			)
		}
	}
</script>

<style>
	.MyInformation{
		width: 100%;
		height: 150px;
		background: rgb(0,164,180);
		border-top: #DCDCDC 1px solid;
		margin-top: 40px;
	}
	#HeadPortrait{
		width: 60px;
		height: 60px;
		border-radius:50%;
		overflow: hidden;
		margin: 10px auto;
	}
	.Headportrait{
		width: 60px;
		height: 60px;
	}
	.Information_item{
		text-align: center;
		margin-top: -3px;
		color: #DCDCDC;
	}
</style>
